<template>
  <div>
    <div class="searchRusult" :class="Status?'scrollbtm':''" v-if="!searchVisiblie">
      <div class="searchInput" @click="()=>searchVisiblie=true">
        <slot name="title-icon">
          <div class="search-box">
            <i class="searchIcon searchContentIcon"></i>
            <span>MacBook Pro 15.4寸</span>
          </div>
        </slot>
      </div>
      <slot name="right-icon">
        <div class="searchMsg">
          <i class="searchIcon searchMsgIcon"></i>
          <span>消息</span>
        </div>
      </slot>
    </div>
    <mt-popup v-model="searchVisiblie" :closeOnClickModal="true" :modal="false" position="right" class="modal-popup">
      <div class="searchContainer">
        <div class="search-top">
          <div class="searchInput" @click="$refs.searchInput.focus()">
            <div class="search-box">
              <i class="searchIcon searchContentIcon"></i>
              <input v-model="Keyword" placeholder="MacBook Pro 15.4寸" ref="searchInput" v-searchFocus/>
              <span class="clear" @click="Keyword=''" v-show="Keyword.length>0">&times;</span>
            </div>
          </div>
          <span @click="()=>{Keyword='';searchVisiblie=false}">取消</span>
        </div>
        <load-more v-show="Keyword.length<=0" >
          <div class="search-hot">
            <p>热搜</p>
            <ul class="search-hot-list">
              <li class="search-hot-item">智能手表</li>
            </ul>
          </div>
          <div class="search-history">
            <p>历史搜索</p>
            <ul class="search-history-list">
              <li class="search-history-item" @click="()=>Keyword = item.keywords" v-for="(item,index) in searchHistoryData" :key="index">{{item.keywords}}</li>
            </ul>
            <div class="clear-history">
              <i></i>
              <span>清空历史搜索</span>
            </div>
          </div>
        </load-more>
        <div class="search-rusult-content" v-show="Keyword.length>0">
          <load-more style="background:#fff;width: 100%;height: 100%;">
            <div class="search-rusult-goods">
              <i></i>
              <span>搜素 {{Keyword}}...</span>
            </div>
            <ul class="search-rusult-list" v-if="searchRusultData!=''">
              <li class="search-rusult-item" v-for="(item,index) in searchRusultData" :key="index" @click="selectedProd(item)">
                <p>{{item.productName}}</p>
              </li>
            </ul>
            <p style="text-align:center;text-align: left;padding: 10px;color: #81838e;font-size: 13px;border-bottom: 1px solid #e1e1e1;"
              v-else>暂无数据...</p>
          </load-more>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import {
    searchGoods
  } from '@/service/getData'
  import {
    getLocalStorage,
    setLocalStorage
  } from '@/utils/mixin'
  import LoadMore from 'common/loadMore';
  export default {
    data() {
      return {
        searchVisiblie: false,
        Keyword: '',
        searchHistoryData: [],
        searchRusultData: []
      };
    },
    props: {
      Status: {
        type: Boolean,
        required: true
      }
    },
    watch: {
      Keyword(val) {
        this.searchRusult(val)
      }
    },
    directives: {
      searchFocus: {
        inserted: function (el) {
          // 聚焦元素
          el.focus();
        },
        update: function (el) {
          // 聚焦元素
          el.focus();
        }
      }
    },
    components: {
      LoadMore
    },

    computed: {},

    methods: {
      async searchRusult(keyWords) {
        this.searchRusultData = [];
        let {
          Data
        } = await searchGoods({
          Keyword: keyWords,
          pageSize: 100,
          pageIndex: 1
        });
        this.searchRusultData = Data;
      },
      async selectedProd(prod) {
        this.$router.push({path: '/searchRusult',query: {Keyword:this.Keyword}})
        let HistoryData = getLocalStorage('searchHistoryData');
        if(!HistoryData)return setLocalStorage('searchHistoryData',[{keywords:this.Keyword,Date:new Date()}]);
        try{
          let Data = JSON.parse(HistoryData);
          Data.push({keywords:this.Keyword,Date:new Date()});
          setLocalStorage('searchHistoryData',Data);
        }catch(err){}
      }
    },

    mounted: function () {
      try{
        this.searchHistoryData = JSON.parse(getLocalStorage('searchHistoryData'));
      }catch(err){}
    }
  }

</script>
